<template>
  <div>
    <p>clicked:{{count}}, count is {{evenOrOdd}}</p>
    <button @click="increment">+</button>&nbsp;
    <button @click="decrement">-</button>&nbsp;
    <button @click="increment4Odd">increment if odd</button>&nbsp;
    <button @click="increment4Async">increment async</button>&nbsp;
  </div>
</template>

<script>
  export default {
    name: "App",
    data() {
      return {
        count: 0,
      }
    },
    computed: {
      evenOrOdd() {
        return this.count % 2 === 0 ? '偶数' : '奇数'
      }
    },
    methods: {
      increment() {
        const count = this.count;
        this.count = count + 1;
      },
      decrement() {
        const count = this.count;
        this.count = count - 1;
      },
      increment4Odd() {
        const count = this.count;
        if (count % 2 === 1) {
          this.count = count + 1;
        }
      },
      increment4Async() {
        setTimeout(() => {
          this.count += 1
        }, 1000);
      }
    }
  }
</script>

<style scoped>

</style>
